<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="40">
        <el-form :inline="true" class="demo-form-inline" align="left">
          <el-form-item>
            <el-input v-model="searchObj.id" placeholder="ID" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchObj.name" placeholder="名称" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchObj.code" placeholder="代码" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchObj.status" placeholder="状态" />
          </el-form-item>

          <el-button type="primary" icon="el-icon-search" @click="getList"
            >搜索</el-button
          >
          <el-button type="primary" icon="el-icon-refresh-left" @click="clear"
            >重置</el-button
          >
          <el-button type="success" plain @click="addUser"> 新增权限</el-button>
        </el-form>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" height="515px">
      <el-table-column fixed prop="id" label="ID" width="100px" sortable />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="代码" />
      <el-table-column prop="link" label="链接" />
      <el-table-column prop="pid" label="PID" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="status" label="状态" width="50px" />

      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editRow(scope)"
            type="primary"
            size="small"
          >
            修改
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope)"
            type="danger"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form">
        <el-form-item label="名称：" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="代码：" :label-width="formLabelWidth">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接：" :label-width="formLabelWidth">
          <el-input v-model="form.link" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="PID：" :label-width="formLabelWidth">
          <el-input
            v-model="form.pid"
            autocomplete="off"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型：" :label-width="formLabelWidth">
          <el-input v-model="form.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态：" :label-width="formLabelWidth">
          <el-switch
            style="display: span"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="激活"
            inactive-text="禁用"
            active-value="Y"
            inactive-value="N"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <Pagenation
      :pageSize="pageInfo.pageSize"
      :total="pageInfo.total"
      :currentPage="pageInfo.pageNum"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    />
  </div>
</template>

<script>
import Pagenation from '@/components/pagenation/index.vue';
export default {
  components: { Pagenation },
  data() {
    return {
      title: '',
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '60px',
      form: {
        id: 0,
        name: '',
        code: '',
        link: '',
        pid: '',
        type: '',
        status: true,
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 8,
        total: 0,
      },
      searchObj: {
        id: null,
        name: '',
        code: '',
        status: '',
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    addUser() {
      this.dialogFormVisible = true;
      this.form.name = '';
      this.form.code = '';
      this.form.link = '';
      this.form.pid = '';
      this.form.type = '';
      this.title = '新增权限';
    },
    submit() {
      if (this.title === '新增权限') {
        this.$axios
          .post('rbacPerm/', this.form)
          .then((res) => {
            if (res.data.code === 500) {
              this.$message.error(res.data.msg);
            } else {
              this.$message.success(res.data.msg);
              this.getList();
              this.dialogFormVisible = false;
            }
          })
          .catch();
      } else if (this.title === '修改权限') {
        this.$axios
          .put('rbacPerm/', this.form)
          .then((res) => {
            if (res.data.code === 500) {
              this.$message.error(res.data.msg);
            } else {
              this.$message.success(res.data.msg);
              this.getList();
              this.dialogFormVisible = false;
            }
          })
          .catch();
      }
    },
    deleteRow(scope) {
      this.$axios
        .delete('rbacPerm/' + scope.row.id)
        .then((res) => {
          if (res.data.code === 200) {
            this.$notify({
              title: '成功',
              message: res.data.msg,
              type: 'success',
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: res.data.msg,
            });
          }
          this.getList();
        })
        .catch();
    },
    editRow(scope) {
      this.title = '修改权限';
      let r = scope.row;
      this.form.id = r.id;
      this.form.name = r.name;
      this.form.code = r.code;
      this.form.link = r.link;
      this.form.pid = r.pid;
      this.form.type = r.type;
      this.dialogFormVisible = true;
    },
    getList() {
      this.$axios
        .post(
          'rbacPerm/' + this.pageInfo.pageNum + '/' + this.pageInfo.pageSize,
          this.searchObj
        )
        .then((res) => {
          this.tableData = res.data.data.list;

          this.pageInfo.pageNum = res.data.data.pageNum;
          this.pageInfo.pageSize = res.data.data.pageSize;
          this.pageInfo.total = res.data.data.total;
        })
        .catch();
    },
    clear() {
      this.searchObj.id = null;
      this.searchObj.name = null;
      this.searchObj.code = null;
      this.searchObj.status = null;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageSize = val;
      this.getList();
    },
    currentChange(val) {
      this.pageInfo.pageNum = val;
      this.getList();
    },
  },
};
</script>